<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增</a-button>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleTable"> 导入数据库表</a-button>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleGen"> 代码生成</a-button>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleViewCode"> 代码预览</a-button>
      </template>
      <template #tableVersion="{ record }">
        <Tag color="green">
          {{ record.tableVersion }}
        </Tag>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <GenModal @register="registerModal" @success="handleSuccess" />
    <TableListModal @register="registerTableListModal" @success="handleSuccess" />
    <GenBaseModal @register="registerGenBaseModal" @success="handleGenBaseSuccess" />
    <GenViewFileListModal @register="registerGenViewFileListModal" @success="handleGenViewFileListSuccess" />
    <GenViewFileTreeModal @register="registerGenViewFileTreeModal" @success="handleGenViewFileTreeSuccess" />
  </div>
</template>

<script lang="ts" name="online-onlCgformHead" setup>
import { reactive, onMounted } from 'vue';
import { Tag, Avatar } from 'ant-design-vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage'
import TableListModal from './components/tableListModal.vue'
import GenModal from './components/genModal.vue'
import GenBaseModal from './components/genBaseModal.vue'
import GenViewFileListModal from './components/genViewFileListModal.vue'
import GenViewFileTreeModal from './components/genViewFileTreeModal.vue'
import { columns, searchFormSchema } from './genData';
import { list, deleteOne, getImportUrl, getExportUrl } from './genApi';
const queryParam = reactive<any>({});
import { useRoute } from 'vue-router';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

//注册model
const [registerModal, { openModal }] = useModal();
const [registerTableListModal, { openModal: openTableListModal }] = useModal();
const [registerGenBaseModal, { openModal: openGenBaseModal }] = useModal();
const [registerGenViewFileListModal, { openModal: openGenViewFileListModal }] = useModal();
const [registerGenViewFileTreeModal, { openModal: openGenViewFileTreeModal }] = useModal();
//注册table数据
const { tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: 'line主表表',
    api: list,
    columns,
    canResize: false,
    showIndexColumn: true,
    formConfig: {
      //labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      showAdvancedButton: true,
      fieldMapToNumber: [],
      fieldMapToTime: [],
    },
    actionColumn: {
      width: 240,
      fixed: 'right'
    },
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    },
  },
  exportConfig: {
    name: "line主表",
    url: getExportUrl,
    params: queryParam,
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess
  },
})

const [registerTable, { getForm, reload }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext

const route = useRoute();
onMounted(async () => {
  //接收路由参数：待进一步测试
  let tableName = route.query?.tableName;
  if (tableName) {
    getForm().setFieldsValue({
      tableName: tableName,
    });
  }
  // $message.info(JSON.stringify(route));
})

/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, {
    isUpdate: false,
    showFooter: true,
  });
}

/**
 * 新增表格事件
 */
function handleTable() {
  openTableListModal(true, {});
}

/**
 * 代码生成事件
 */
function handleGen() {
  console.log('数据为1222222：', selectedRowKeys.value);
  let length = selectedRowKeys.value.length;
  if (length === 0) {
    $message.error('请先选择一条数据!!');
    return;
  } else if (length > 1) {
    $message.error('不能选择多条数据!!');
    return;
  }
  openGenBaseModal(true, { ...selectedRows.value[0] });
}

/**
 * 代码预览
 */
function handleViewCode() {
  openGenViewFileTreeModal(true, { tableId: selectedRowKeys.value[0], });
}

function handleGenViewFileTreeSuccess(params) {
  $message.info('预览文件树关闭....' + params);
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}
/**
 * 删除事件
 */
 async function handleDelete(record) {
  await deleteOne({ id: record.id });
  handleSuccess();
}
/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}
/**
 * 成功回调-文件生成
 */
function handleGenBaseSuccess(fileList) {
  // console.log('数据为111：', fileList);
  let params = {
    tableId: selectedRowKeys.value[0],
    fileList: fileList
  }
  openGenViewFileListModal(true, params);
}
/**
 * 成功回调-文件生成的列表预览
 */
function handleGenViewFileListSuccess(params) {
  $message.info('文件列表关闭');
}




/**
 * 表格操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '编辑',
      // icon: 'clarity:note-edit-line',
      onClick: handleEdit.bind(null, record)
    },
    {
      label: '删除',
      // icon: 'ant-design:delete-outlined',
      color: 'error',
      popConfirm: {
        title: '是否确认删除',
        placement: 'left',
        confirm: handleDelete.bind(null, record),
      }
    }
  ]
}
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
  width: 100%;
}
</style>